<template>
    <div>
        <div class="swipper-box">
            <swiper :options="swiperOption" ref="mySwiper-2">
                <swiper-slide v-for="item in swipperList" :key="item.id">
                    <div class="mui-card">
                        <div class="mui-card-header mui-card-media"
                            :style="{ 'height': '40vw', 'background-size': 'cover', 'background-image': 'url(' + item.imgUrl + ')' }">
                        </div>
                        <div class="mui-card-content">
                            <div class="mui-card-content-inner">
                                <p>{{ item.shopper }}</p>
                                <p style="color: #333;">{{ item.content }}</p>
                            </div>
                        </div>
                        <div class="mui-card-footer">
                            <a class="mui-card-link" @click="$router.push('../../BoBo/GoodsDetail/' + item.id)">详情</a>
                            <a class="mui-card-link" style="color:red">{{ item.const }}</a>
                        </div>
                    </div>
                </swiper-slide>
            </swiper>
        </div>
        <div>
            <p style="font-size: 10px; text-align: center; ;">波波水果店，遇见您便是荣幸，愿罗尽天下好食物，供您评鉴</p>
        </div>
    </div>
</template>

<script>
import { METHODS } from 'http';

export default {
    name: 'HomeCardVegetable',
    data() {
        return {
            swiperOption: {
                pagination: {
                    el: '.swiper-pagination-2'
                },
                loop: true
            },
            swipperList: [
                {
                    'id': '011',
                    'imgUrl': require("../../../../img/home/草莓中部.jpg"),
                    'content': '又大又圆，又白又嫩，水嫩多汁，只需99即可带回一斤，快来抢购啦',
                    'shopper': 'bobo水果店',
                    'const': '￥99'
                },
                {
                    'id': '012',
                    'imgUrl': require("../../../../img/home/taozi.jpg"),
                    'content': '又大又圆，又白又嫩，水嫩多汁，只需99即可带回一斤，快来抢购啦',
                    'shopper': 'bobo水果店',
                    'const': '￥99'
                },
                {
                    'id': '013',
                    'imgUrl': require("../../../../img/home/niuyouguo.jpg"),
                    'content': '又大又圆，又白又嫩，水嫩多汁，只需99即可带回一斤，快来抢购啦',
                    'shopper': 'bobo水果店',
                    'const': '￥99'
                },
                {
                    'id': '014',
                    'imgUrl': require("../../../../img/home/youzi.jpg"),
                    'content': '又大又圆，又白又嫩，水嫩多汁，只需99即可带回一斤，快来抢购啦',
                    'shopper': 'bobo水果店',
                    'const': '￥99'
                },
                {
                    'id': '015',
                    'imgUrl': require("../../../../img/home/火龙果中部.jpg"),
                    'content': '又大又圆，又白又嫩，水嫩多汁，只需99即可带回一斤，快来抢购啦',
                    'shopper': 'bobo水果店',
                    'const': '￥99'
                },
                {
                    'id': '016',
                    'imgUrl': require("../../../../img/home/柠檬中部.jpg"),
                    'content': '又大又圆，又白又嫩，水嫩多汁，只需99即可带回一斤，快来抢购啦',
                    'shopper': 'bobo水果店',
                    'const': '￥99'
                },
            ]
        }
    }
}
</script>

<style scoped>
.mui-card {
    display: inline-block;
}
</style>